<template>
  <div class="Swiper">
  <swiper :options="swiperOption" v-if="showSwiper">
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img class="item-img" :src="item.imgUrl" alt="">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>

  export default {
    name: 'HomeSwiper',
    props:{
      swiperList:Array
    },
    data(){
        return{
          swiperOption:{
            pagination:'.swiper-pagination',
          
          }
        }
    },
    computed :{
      showSwiper(){
        return this.swiperList.length
      }
    }

  }
</script>


<style lang="stylus" scoped>
  .Swiper >>> .swiper-pagination-bullet-active
    background-color: #fff
  .Swiper 
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.23%
    background-color: #eee
    .item-img
      width: 100%
</style>
